<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件event</title>
    <script src="jquery-1.10.2.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <h2>ng-click</h2>
    <div ng-app="app01" ng-controller="ctrl01" id="app01">
        <button ng-click="count01=count01+1">点击</button>
        {{count01}}
    </div>
    <script>
        var app01=angular.module("app01",[]);
        app01.controller("ctrl01",function ($scope) {
            $scope.count01=0;
        });
    </script>
    <h2>ng-click:ng-hide="true"</h2>
    <div ng-app="app02" ng-controller="ctrl02" id="app02">
        <button ng-click="toggle()">显示/隐藏</button>
        <div ng-hide="flag2">
            姓名：<input ng-model="name">{{name}}
        </div>
    </div>
    <script>
        var app02=angular.module("app02",[]);
        app02.controller("ctrl02",function ($scope) {
            $scope.flag2=false;
            $scope.toggle = function() {
                $scope.flag2 = !$scope.flag2;
            };
        });
        angular.bootstrap(document.getElementById("app02"),["app02"]);
    </script>
    <h2>双击事件：ngDblclick</h2>
    <div ng-app="app03" ng-controller="ctrl03" id="app03">
        <button ng-dblclick="dbclickFn()">双击</button>{{count}}
    </div>
    <script>
        var app03=angular.module("app03",[]);
        app03.controller("ctrl03",function ($scope) {
            $scope.count=0;
            $scope.dbclickFn=function () {
                $scope.count=$scope.count+1;
            }
        });
        angular.bootstrap(document.getElementById("app03"),["app03"]);
    </script>
    <h2>失去焦点：ngBlur</h2>
    <div ng-app="app04" ng-controller="ctrl04" id="app04">
        <a href="#" ng-blur="ablur()">A标签</a>
        <input ng-blur="inputblur()"/>
        <textarea ng-blur="textareablur()"></textarea>
        <select ng-blur="selectblur()"></select>
        <div id="app04Result"></div>
    </div>
    <script>
        var app04=angular.module("app04",[]);
        app04.controller("ctrl04",function ($scope) {
            $scope.ablur=function () {
                document.getElementById("app04Result").innerHTML="A标签失去焦点……";
            }
            $scope.inputblur=function () {
                document.getElementById("app04Result").innerHTML="INPUT标签失去焦点……";
            }
            $scope.selectblur=function () {
                document.getElementById("app04Result").innerHTML="SELECT标签失去焦点……";
            }
            $scope.textareablur=function () {
                document.getElementById("app04Result").innerHTML="textarea标签失去焦点……";
            }
        });
        angular.bootstrap(document.getElementById("app04"),["app04"]);
    </script>
</body>
</html>